<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { computed, onMounted } from "vue";
import useAjax from "@/utils/hooks/use-ajax";
import { ajaxMapManageListSchema } from "@/utils/schema";
import { API_MAP_MANAGE_LIST } from "@/utils/api";

const {
  loading,
  doAjax,
  data,
} = useAjax({
  api: API_MAP_MANAGE_LIST,
  schema: ajaxMapManageListSchema,
});

const tableData = computed(() =>
  data.value.data.map((item, index) => ({
    ...item,
    id: index,
  }))
);
const props = defineProps({
  serverLocation: String,
});

onMounted(() => {
  getData();
});

const onClickRefresh = () => {
  getData();
};

const getData = async () => {
  await doAjax({});
};

const copyMapID = async (text: string) => {
  try {
    await navigator.clipboard.writeText(text);
    ElMessage.success("复制成功");
  } catch (err) {
    const textArea = document.createElement("textarea");
    textArea.value = text;
    textArea.style.cssText = "position:fixed;left:-9999px;top:-9999px";
    document.body.appendChild(textArea);
    textArea.select();
    try {
      const successful = document.execCommand("copy");
      if (!successful) throw new Error("复制失败");
      ElMessage.success("复制成功");
    } finally {
      textArea.remove();
    }
  }
};

const goToAuthorPage = (authorId: string) => {
  ElMessage.success("正在访问作者资料...");
  setTimeout(() => {
    const url = `https://www.plazmaburst2.com/?a=&s=7&ac=${authorId}`;
    window.open(url, "_blank");
  }, 1000);
};

const goToMapPage = (mapId: string) => {
  ElMessage.success("正在访问地图详情页...");
  setTimeout(() => {
    const url = `https://www.plazmaburst2.com/?s=9&a=&m=${mapId}`;
    window.open(url, "_blank");
  }, 1000);
};
</script>
<template>
  <div>
    <el-button
      v-if="false"
      type="primary"
      size="small"
      @click="onClickRefresh()"
    >
      刷新
    </el-button>
    <el-table :data="tableData" class="w-full" v-loading="loading">
      <el-table-column
        v-if="false"
        prop="id"
        label="序号"
        class="w-[60px] text-center"
      >
      </el-table-column>
      <el-table-column prop="imgUrl" label="预览图" class="w-[200px]">
        <template #default="scope">
          <div>
            <el-image
              :preview-teleported="true"
              class="w-[200px] h-[100px]"
              :src="`https://www.plazmaburst2.com/${scope.row.imgUrl}`"
              :preview-src-list="[
                `https://www.plazmaburst2.com/${scope.row.imgUrl}`,
              ]"
              :initial-index="0"
              fit="cover"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="地图名称（点击访问详情页）"
        class="w-[300px]"
      >
        <template #default="scope">
          <a
            @click.prevent="goToMapPage(scope.row.mapId)"
            :href="`https://www.plazmaburst2.com/?s=9&a=&m=${scope.row.mapId}`"
            target="_blank"
            class="cursor-pointer text-blue-500 hover:text-blue-700 no-underline"
          >
            {{ scope.row.name }}
          </a>
        </template>
      </el-table-column>
      <el-table-column prop="mapId" label="地图ID(点击复制)" class="w-[200px]">
        <template #default="scope">
          <div
            @click="copyMapID(scope.row.mapId)"
            class="cursor-pointer text-blue-500 hover:text-blue-700"
          >
            {{ scope.row.mapId }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="author"
        label="地图作者（点击作者资料）"
        class="w-[200px]"
      >
        <template #default="scope">
          <a
            @click.prevent="goToAuthorPage(scope.row.author)"
            :href="`https://www.plazmaburst2.com/?a=&s=7&ac=${scope.row.author}`"
            target="_blank"
            class="cursor-pointer text-blue-500 hover:text-blue-700 no-underline"
          >
            {{ scope.row.author }}
          </a>
        </template>
      </el-table-column>
      <el-table-column prop="info" label="地图介绍" class="min-w-[200px]">
        <template #default="scope">
          <el-tooltip
            :raw-content="true"
            :content="`<div style='max-width:300px;'>${scope.row.info}</div>`"
            placement="left"
          >
            <div
              class="h-[100px] overflow-y-auto"
              v-html="scope.row.info"
            ></div>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
